<script setup lang='ts'>
import Moment from 'moment'
import { ref, h,shallowRef, onMounted  } from 'vue'
import { formatTime } from '@/utils'
import { useRoute } from 'vue-router'
import { useElementPlusTheme } from 'use-element-plus-theme'
import DateSelect from './DateSelect.vue'

onMounted(() => {
  themeInit()

  let arr = [
    {
      name: '规格1',
      value: [ '1', '11', '111' ]
    },
    {
      name: '规格2',
      value: [ '2', '22' ]
    },
    {
      name: '规格3',
      value: [ '3', '33' ]
    }
  ]
  let objItem:any = {}
  let tableData:any = []
  let itemNum = 1
  arr.forEach(item => {
    itemNum = item.value.length * itemNum
    objItem[item.name] = item.name
  })
  for (let i = 0; i < itemNum; i++) {
    tableData.push({
      ...objItem
    })
  }
  let num:any = itemNum / arr[0].value.length
  
  console.log('i--------》', tableData, arr[0].name )
  for(let k = 0; k < arr.length; k++) {
    let i = 0
    let num1 = num * k
    console.log('k--------》', k)
    for (let j = 0; j < arr[k].value.length; j++) {
      console.log('num1--------》', num1)
      if (i === num1) {
        num1 = (j + 1) * num
      }
      while (i < num1) {
        let key = arr[k].name
        tableData[i][key] = arr[k].value[j]
        console.log('i--------》', i, arr[k].name)
        i++
      }
    }
  }
  console.log('objItem--------》', objItem, itemNum, tableData)
})

// 页面刷新后皮肤初始化,保留刷新前的主题颜色
const themeInit = () => {
  let theme = localStorage.theme || 'fresh'
  console.log('设置默认主题------->', document.getElementById('layout'));
  (document.getElementById('layout') as HTMLElement).className = 'layout ' + theme
  localStorage.theme = theme

}

const defaultTheme = ref('#405DFF')

const selectColor = (num:number) => {
  switch(num){
  case 1:
    defaultTheme.value = '#FFF'
    useElementPlusTheme('#FFF')
    break 
  case 2:
    defaultTheme.value = '#00000000'
    useElementPlusTheme('#00000000')
    break
  case 3:
    defaultTheme.value = '#836c29FF'
    useElementPlusTheme('#836c29FF')
    break
  }
}

const { changeTheme } = useElementPlusTheme(defaultTheme.value)
const route = useRoute()

// 表格
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const value = ref('')
const options = [
  {
    value: 1,
    label: '明亮模式'
  },
  {
    value: 2,
    label: '暗夜模式'
  },
  {
    value: 3,
    label: '护眼模式'
  }
]

const backColor = ref('')
const thenOptions = [
  {
    value: 'yellow',
    label: '明亮模式'
  },
  {
    value: 'black',
    label: '深色模式'
  },
  {
    value: 'fresh',
    label: '小清新主题'
  }
]
// 分页
const pageInfo = ref({
  total: 100,
  pageSize: 10,
  pageNum: 1
})
const value1 = ref('')
const handlePlanSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handlePlanCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

// 搜索
const searchTimeTitle = shallowRef({
  render() {
    return h('div', '时间')
  }
})
const searchForm = {
  type: 1,
  time: Moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
  input: ''
}
const onSearch = () => {
  console.log('搜索')
}
const onReset = () => {
  console.log('重置')
}

const themeChange = (type:any) => { // 点击换肤
  console.log('换肤-------->', (document.getElementById('layout') as HTMLElement).className);
  (document.getElementById('layout') as HTMLElement).className = 'layout ' + type
  localStorage.theme = type
}

// 模态框
const diaVisible = ref(false)
const onSave = () => {
  console.log('保存')
}
const onClose = () => {
  console.log('关闭')
  diaVisible.value = false
}
const openDia = () => {
  diaVisible.value = true
}

const iconTitle = shallowRef({
  render() {
    return h('div', '时间')
  }
})
</script>

<template>
  <div>
    <div>测试页面Test</div>
    <div style="width: 600px;margin: 10px;">
      <el-date-picker
        v-model="value1"
        :clearable="false"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        type="datetimerange"
        :prefix-icon="iconTitle"
        format="YYYY-MM-DD HH时"
        value-format="YYYY-MM-DD HH:00:00"
      />
    </div>
    <el-color-picker
      v-model="defaultTheme"
      @change="changeTheme"
    />
    <div style="width: 416px;" />
    <div style="padding: 20px;">
      <el-select
        v-model="backColor"
        placeholder=""
        @change="themeChange"
      >
        <el-option
          v-for="(item,index) in [{name: '123', id: 1}]"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
        <template #prefix>
          <div>切换主题</div>
        </template>
        <el-option
          v-for="(item, index) in thenOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div style="margin: 10px;">
        <el-button
          type="primary"
        >
          测试按钮
        </el-button>
      </div>
      <div class="text-div">
        <div class="text-btn custom-button">
          测试自定义按钮
        </div>
      </div>
    </div>
    <!-- <div><span>当前路由：</span><span style="font-weight: 600;font-size: 14px;">{{ route.path }}</span></div> -->
    <!-- <div><span>测试utils，当前时间：</span><span>{{ formatTime(new Date().toISOString()) }}</span></div> -->
    <el-button
      v-has="'/test/add'"
      type="primary"
    >
      测试添加按钮权限
    </el-button>
    <el-button
      v-has="'/test/edit'"
      type="primary"
    >
      测试编辑按钮权限
    </el-button>

    <el-table
      :data="tableData"
      style="width: 100%;"
    >
      <el-table-column
        prop="date"
        label="Date"
        width="180"
      />
      <el-table-column
        prop="name"
        label="Name"
        width="180"
      />
      <el-table-column
        prop="address"
        label="Address"
      />
    </el-table>
    <el-pagination
      v-model:current-page="pageInfo.pageNum"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />

    <div class="btn-div">
      按钮示例：
      <m-button
        primary
      >
        主要
      </m-button>
      <m-button>
        普通
      </m-button>
      <m-button
        disabled
      >
        禁用
      </m-button>
    </div>
    
    <search-area
      @search="onSearch"
      @reset="onReset"
    >
      <el-form
        :inline="true"
        :model="searchForm"
      >
        <el-form-item>
          <el-select
            v-model="searchForm.type"
            class="search-select"
            :teleported="false"
          >
            <template #prefix>
              <div>计划编号</div>
            </template>
            <el-option
              v-for="(item,index) in [{name: '123', id: 1}]"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.time"
            :clearable="false"
            :prefix-icon="iconTitle"
            type="datetime"
            format="YYYY-MM-DD HH时"
            value-format="YYYY-MM-DD HH:00:00"
          >
            <template #prefix>
              <div>计划日期</div>
            </template>
            <template #prepend>
              日期
            </template>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.input"
            oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
            placeholder="请输入"
          >
            <template #prefix>
              <div>输入框</div>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #btn>
        <m-button>
          新增按钮
        </m-button>
      </template>
    </search-area>

    <m-button
      primary
      @click="openDia"
    >
      模态框
    </m-button>
    <dialog-area
      :dialog-visible="diaVisible"
      dialog-title="添加盘库计划"
      @save="onSave"
      @close="onClose"
    >
      内容
    </dialog-area>
  </div>
</template>

<style scoped lang=scss>
.text-btn {
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
}

.el-pagination {
  margin: 10px 0;
}

.btn-div {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .m-button {
    margin-right: 5px;
  }
}

.search-area {
  margin-bottom: 10px;
}
</style>